<template>
  	<div class="bus-plan">
      <div class="plan">
        <span class="plan-icon"></span>
        <div class="plan-style">
          <span class="plan-font">乘车方案</span>
        </div>
      </div>

      <div class="area-container">
        <img class="area-toggle" v-on:click="toggle()" src="../../assets/image/toggle-icon.png"/>
        <div class="area plan-area">
          <div class="area-top-container" v-on:click="setStart()">
            <img  class="area-icon" src="../../assets/image/start-point-icon.png"/>
            <span class="area-span">{{plan.startAddress.address}}</span>
          </div>
          <div class="area-bottom-container" v-on:click="setEnd()">
            <img class="area-icon" src="../../assets/image/end-point-icon.png"/>
            <span v-if="plan.endAddress.address === '我要去哪'" class="area-span end">{{plan.endAddress.address}}</span>
            <span v-else class="area-span">{{plan.endAddress.address}}</span>
          </div>
        </div>
        <button type="button" class="btn btn-default-search" v-on:click="searchBtn()">搜索</button>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      plan: {
        startAddress: {
          address: '我的位置'
        },
        endAddress: {
          address: '我要去哪'
        }
      }
    };
  },
  methods: {
    /*
    更新我的位置
    */
    updateCurrentAddress () {
      if (!this.$storage.getStorage('startAddress')) {
        if (this.$storage.getStorage('currentAddress')) {
          this.plan.startAddress = this.$storage.getStorage('currentAddress');
        }
      }
    },
    /*
    设置起点
    */
    setStart: function () {
      this.$router.push({path: '/setStart'});
    },
    /*
    设置终点
    */
    setEnd: function () {
      this.$router.push({path: '/setEnd'});
    },
    /*
    起始点切换
    */
    toggle: function () {
      if ((this.$storage.getStorage('startAddress') || this.$storage.getStorage('currentAddress')) && this.$storage.getStorage('endAddress')) {
        var temp = this.plan.startAddress;
        this.plan.startAddress = this.plan.endAddress;
        this.plan.endAddress = temp;
      }
    },
    /*
    搜索乘车方案
    */
    searchBtn: function () {
      if (this.plan.startAddress.address === '我的位置' || this.plan.endAddress.address === '我要去哪') {
        this.$utils.toastMessage('请您先选择起点终点');
        return;
      }
      if (this.plan.startAddress.address === this.plan.endAddress.address) {
        this.$utils.toastMessage('起点和终点不支持同一点');
        return;
      }
      let city = this.$storage.getStorage('currentCity');

      if (typeof (this.plan.startAddress.city) !== 'undefined' && typeof (this.plan.endAddress.city) !== 'undefined') {
        if (this.plan.startAddress.city !== this.plan.endAddress.city) {
          this.$utils.toastMessage('无乘车方案');
          return;
        }
      }

      // if (this.plan.startAddress.type === 0) { // 地点
      //   if (city) {
      //     if (this.plan.startAddress.city !== city) {
      //       this.$utils.toastMessage('无乘车方案');
      //       return;
      //     }
      //   } else {
      //     city = this.plan.endAddress.city;
      //   }
      // }
      // if (this.plan.endAddress.type === 0) {
      //   if (city) {
      //     if (this.plan.endAddress.city !== city) {
      //       this.$utils.toastMessage('无乘车方案');
      //       return;
      //     }
      //   } else {
      //     city = this.plan.endAddress.city;
      //   }
      // }

      var data = {};
      data.startLng = this.plan.startAddress.lng;
      data.startLat = this.plan.startAddress.lat;
      data.endLng = this.plan.endAddress.lng;
      data.endLat = this.plan.endAddress.lat;
      data.city = city;
      let _this = this;
      this.$baseService.getData(this.$global.API_DETECT_ADDRESS, data, function () {
        data.mobile = _this.plan.startAddress.mobile;
        data.startAddress = _this.plan.startAddress.address;
        data.startType = _this.plan.startAddress.type;
        data.endAddress = _this.plan.endAddress.address;
        data.endType = _this.plan.endAddress.type;
        data.strategy = 0;
        _this.$storage.setStorage('searchData', data);
        _this.$router.push({ path: '/planList' });
      });
    }
  },
  created () {
    // this.$storage.setStorage('searchData', {});
    // if (!this.$storage.getStorage('startAddress')) {
    //   if (this.$storage.getStorage('currentAddress')) {
    //     this.plan.startAddress = this.$storage.getStorage('currentAddress');
    //   }
    // }
    // 设置起始点
    if (this.$storage.getStorage('startAddress')) {
      this.plan.startAddress = this.$storage.getStorage('startAddress');
    } else {
      if (this.$storage.getStorage('currentAddress')) {
        this.plan.startAddress = this.$storage.getStorage('currentAddress');
      }
    }
    if (this.$storage.getStorage('endAddress')) {
      this.plan.endAddress = this.$storage.getStorage('endAddress');
    }
  },

  destroyed () {
    this.$storage.setStorage('planDetail', {});
  }
};
</script>

<style scoped>

  .bus-plan {
    margin-top:0.26rem; background-color: #ffffff
  }

  .plan {
    display: flex;
  }

  .plan-icon {
    background-color: #FE952C;
    width: 0.08rem;
    height: 0.4rem;
    margin: 0.4rem 0.32rem 0.4rem 0px;
  }

  .plan-style {
    padding: 0.4rem 0px 0.4rem 0px;
    display: flex;
    border-bottom: 1px solid #f7f7f7;
    width: 100%;
  }

  .plan-style .plan-font{
    font-size: 0.37rem;
    color: #333333;
    align-self: center;
    height: 0.42rem;
  }

  .plan-area{
    margin-right: 0.4rem;
    display: flex;
    flex: 1;
  }

  .btn-default-search {
    color: #ffffff;
    font-size: 0.4rem;
    width: 1.6rem;
    height: 0.93rem;
    background-color: #FB9528;
    border-color: #FB9528;
    margin-right: 0.4rem;
    align-self: center;
  }

  .btn:focus, .btn:hover {
    color: #fff;
    text-decoration: none;
  }

  .end {
    color: #999999;
  }

</style>
